<template>
  <div style="width:100%;height:100%;">
    <div v-if="env === 'production'"
         class="verticalScroll"
         style="width:100%;height:100%;"
         ref="vertical-scroll">
      <div style="width: 100%">
        <slot>

        </slot>
        <div style="width:100%;position: absolute; bottom: 0;">
        </div>
      </div>

    </div>

    <div v-if="env === 'edit'" class="editScroll" style="width:100%;height:100%;">
      <slot>

      </slot>
    </div>
  </div>
</template>

<script>
  // import Hello from './components/Hello'
  import Bscroll from 'better-scroll'

  export default {
    data () {
      return {
        statY: 0,
        scrollY: 0,
        puttDownY: 0,
        isTop: true,
        wrpperHeight: 0,
        wrpperTop: 0,
        touchEndTop: false,
        touchTime: 0
      }
    },
    watch: {},
    components: {},
    created () {
      this.$store.commit('cjy/CHANGE_PAGE_POS_Y', 0) //初始化滚轮位置
    },
    mounted() {
      if (this.env == 'edit') {
        return
      }
      window.PSEvent.listen('verticalScrollGoPosition', this.goToPositionForHeader)
      this.$nextTick(
        this.createdScroll() //执行初始化 bsroll
      )
    },
    methods: {
      refresh () {
        if (this.Bscroll) {

          this.Bscroll.refresh()// 刷新bscroll 组件
        }
      },
      goToPositionForHeader (event) {
        this.Bscroll.scrollTo(0, -event, 500, 'easing')
      },

      //滚动到指定位置
      gotoPosition (pos) {
        var position = pos // 跳转到的位置
        var deleat = 100; //延迟时间
        var i = 0  // 执行次数
        //递归
        var gotoPosistion = () => {
          i++ // 每次gotoPosistion执行次数加1
          // 设置定时器
          this.setTimeOut = setTimeout(() => {
            var outerHeight = this.Bscroll ? -this.Bscroll.maxScrollY : 0  // 获取当前Bscroll的最大高度
            if (i * deleat > 3000) {
              //当执行到3000 ms时结束
              this.$store.commit("cjy/SET_IS_RETURN", false);
              return
            } else if (outerHeight >= position) {
              // 当Bscroll的最大高度 不小于要滚动的位置 执行滚动到指定位置
              this.Bscroll.scrollTo(0, -position, 0, 'easing')
              this.$store.commit('cjy/CHANGE_PAGE_POS_Y', -position)
              this.$store.commit("cjy/SET_IS_RETURN", false);

              return
            }
            // 递归重复执行
            gotoPosistion()
          }, deleat)
        }

        //如果滚动位置为0 不需要混动 退出
        if (position == 0) {
          return
        }
        gotoPosistion()//执行 跳转代码
      },

      //  初始Bscroll实例
      createdScroll ()  {
        this.Bscroll && this.Bscroll.destroy()
        var verticalScroll = this.$refs['vertical-scroll']
        this.Bscroll = new Bscroll(verticalScroll, {
          scrollY: true,
          bounce: false,
          probeType: 3,
          click: true
        })

        this.disable()
        var wrpperHeight = this.getWrpperHeight()
        var wrpperTop = this.getWrpperTop()

        this.$emit('getWrpperSize', {wrpperHeight, wrpperTop})
      },

      getWrpperHeight () {
        var verticalScroll = this.$refs['vertical-scroll']
        this.wrpperHeight = verticalScroll ? verticalScroll.offsetHeight : document.body.offsetHeight
        return this.wrpperHeight
      },
      getWrpperTop () {
        var verticalScroll = this.$refs['vertical-scroll']
        this.wrpperTop = verticalScroll ? verticalScroll.getBoundingClientRect().top : 0
        return this.wrpperTop
      },

      // 滚动到头部
      goTop () {
        this.Bscroll && this.Bscroll.scrollTo(0, 0, 500, 'easing')
      },
      enable() {
        this.Bscroll && this.Bscroll.enable()
      },
      disable () {
        this.Bscroll && this.Bscroll.disable()
      }
    },

    computed: {
      env() {
        return window.environment;
      },
    },
    updated() {
      this.$nextTick(
        () => {
          this.refresh() // 刷新动作
        }
      )
    },
    beforeDestroy() {
      this.setTimeout && clearTimeout(this.setTimeout) // 清除定时器
      this.Bscroll && this.Bscroll.destroy()
      window.PSEvent.remove && window.PSEvent.remove('verticalScrollGoPosition', this.goToPositionForHeader)
    },
  }
</script>

<style scoped="">
  .editScroll {
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>
